<template>
  <div>
    <div class="card-top">
      <div>
        <h3>可用短信/条</h3>
        <span>{{divNumber.Usable}}</span>
      </div>
      <div>
        <h3>已发短信/条</h3>
        <span>{{divNumber.Sended}}</span>
      </div>
      <div>
        <h3>通讯录/人</h3>
        <span>{{divNumber.mailNUM}}</span>
      </div>
    </div>
    <div class="card-bottom">
      <div class="card-bottom-left" >
        <h3>短信编辑</h3>
        <el-input type="textarea" :maxlength=67 v-model="msg" :rows="10" style="font-size: 24px" placeholder="请输入发送短信信息"></el-input>
        <span>已输入：{{this.msglenngth}}/67</span>
      </div>
      <div class="card-bottom-right">
        <el-col :span="24" class="action-bar">
          <el-input v-model="input" class="action-bar-input" placeholder="请输入姓名/手机号"></el-input>
          <el-button type="primary" size="medium" @click="Transmission">发送</el-button>
        </el-col>

        <el-table ref="multipleTable" :row-key="getRowKey" @selection-change="selectionRowsChange" :data="activityList" highlight-current-row class="el-table-style1">
          <el-table-column type="selection" prop="id" :reserve-selection="true" width="75"></el-table-column>
          <el-table-column prop="real_name" label="姓名" sortable></el-table-column>
          <el-table-column prop="phone" label="手机号" sortable></el-table-column>
        </el-table>
        <el-col :span="24" class="footer-bar">
          <div class="page-code">
            <el-pagination
              background
              layout="prev, pager, next"
              :total="total"
              :page-size="pagesize"
              @current-change="currentChange"
            ></el-pagination>
          </div>
          <div>
            <el-checkbox v-model="checked" @change="changeChecked">全选</el-checkbox>
          </div>
        </el-col>
      </div>
    </div>
  </div>
</template>
<script>
    export default {
      name: "sendMessage",
      data(){
        return{
          msg: '',
          msglenngth:'0',
          activityList:[],
          input:'',
          divNumber: {
            Usable: '0',
            mailNUM: '0',
            Sended: '0'
          },
          page: 1,
          pagesize : 10,
          total: 0,
          address_book_ids:[],
          AllList: [],
          checked: false,
          activityId: [],
          selectionId: []
        }
      },
      mounted(){
        this.getDIVnumber();
        this.getAddressBookList();
      },
      watch:{
        'input':function () {
            this.getAddressBookList();
        },
        'msg':function (news) {
          this.msglenngth = news.length;
        }
      },
      methods:{
        getRowKey(row) {
          return row.id;
        },
        //获取通讯录人数/已发短信数/可用短信数
        async getDIVnumber(){
          //已发短信数
          const res = await this.$api.getSmsList();
          if (res.data.level == 'success'){
            this.divNumber.Sended = res.data.page_info.total;
          }
          //可用短信数
        },
        //获取选中收件人id
        selectionRowsChange(e){
          this.selectionId = [];
          for(let i = 0;i<e.length;i++){
            this.selectionId.push(e[i].id);
            this.address_book_ids.push(e[i].id);
          }
          var delSelect = [];
          for (let n = 0;n<this.activityId.length;n++){
            if (!this.selectionId.includes(this.activityId[n])){
              delSelect.push(this.activityId[n])
            }
          }
          this.address_book_ids = Array.from(new Set(this.address_book_ids))
          for (let o = 0;o<delSelect.length;o++){
            if (this.address_book_ids.includes(delSelect[o])){
              this.address_book_ids.splice(this.address_book_ids.indexOf(delSelect[o]),1)
            }
          }
          if (this.address_book_ids.sort().toString()== this.AllList.sort().toString()) {
            this.checked = true;
          }
        },
        //获取通讯列表
        async getAddressBookList(){
          let params = {
            page: this.page,
            limit: this.pagesize,
            keyword: this.input
          }
          const res = await this.$api.getAddressBookList(params);
          if (res.data.level == 'success'){
            this.activityId = []
            this.AllList = res.data.address_book_ids.map(Number);
            this.activityList = res.data.data;
            this.total = res.data.page_info.total;
            this.divNumber.mailNUM = res.data.page_info.total
            for(let i = 0;i<this.activityList.length;i++){
              this.activityId.push(this.activityList[i].id);
              if (this.address_book_ids.includes(this.activityList[i].id)){
                this.$refs.multipleTable.toggleRowSelection(this.activityList[i])
              }
            }
          } else {
            this.$message({
              message: res.data.message,
              type: 'warning'
            })
          }
        },
        //发送短信
        async sendSms(){
          if (this.address_book_ids.length >= 1){
            let params = {
              address_book_ids: this.address_book_ids,
              content: this.msg
            }
            const res = await this.$api.sendSms(params);
            if (res.data.level == 'success') {
              this.msg = "";
              this.address_book_ids = [];
              this.getAddressBookList();
              this.getDIVnumber();
            }
          } else {
            this.$message({
              type: 'warning',
              message: '请选择收件人'
            });
          }

        },
        //发送按钮事件
        Transmission() {
          this.$confirm('是否继续发送该短信给指定的收件人?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$message({
              type: 'success',
              message: '发送成功!'
            });
            this.sendSms();
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消发送'
            });
          });
        },
        //分页按钮显示
        currentChange(id){
          this.page = id;
          this.getAddressBookList();
        },
        //全选
        changeChecked(e){
          if (e == true){
            this.address_book_ids = this.AllList;
            this.getAddressBookList();
          }else {
            for(let i = 0;i<this.activityList.length;i++){
              if (this.address_book_ids.includes(this.activityList[i].id)){
                this.$refs.multipleTable.toggleRowSelection(this.activityList[i])
              }
            }
            this.address_book_ids = []
            this.getAddressBookList();
          }
        }
      }
    }
</script>

<style lang='scss' scoped>
  .card-top{
    margin: 20px 0;
    width: 50%;
    div{
      display: inline-block;
      margin: 1%;
      width: 30%;
      height: 100px;
      border: 1px solid #15A589;
      border-radius: 5px;
      text-align: center;
      line-height: 50px;
      span{
        font-weight: bold;
      }
    }
  }
  .card-bottom{
    position: relative;
    height: 500px;
    .card-bottom-left{
      width: 50%;
      font-size: 24px;
      h3{
        margin-bottom: 20px;
      }
      span{
        font-size: 16px;
        font-weight: normal;
        padding: 0 10px;
      }
    }
    .card-bottom-right{
      position: absolute;
      right: 10px;
      top: 0;
      width: 47%;
    }
    .el-table-style1{
      height: 300px;
      overflow-x: hidden;
      overflow-y: scroll;
    }
  }
</style>
